<!-- 登录弹窗 -->
<div id="login-modal" class="modal-overlay hidden">
    <div class="modal-container">
        <!-- 弹窗头部 -->
        <div class="modal-header">
            <h3 class="modal-title">用户登录</h3>
            <button onclick="closeLoginModal()" class="modal-close">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>

        <!-- 弹窗内容 -->
        <div class="modal-content">
            <!-- 登录表单 -->
            <form id="modal-login-form" onsubmit="return false;">
                <div class="space-y-4">
                    <!-- 用户名/邮箱 -->
                    <div class="form-group">
                        <div class="input-with-icon">
                            <i class="fas fa-user input-icon"></i>
                            <input type="text" id="modal-username" name="username" required
                                   class="form-input-with-icon"
                                   placeholder="请输入用户名或邮箱">
                        </div>
                    </div>

                    <!-- 密码 -->
                    <div class="form-group">
                        <div class="password-container-with-icon">
                            <i class="fas fa-lock input-icon"></i>
                            <input type="password" id="modal-password" name="password" required
                                   class="form-input-with-icon"
                                   placeholder="请输入密码">
                            <button type="button" onclick="toggleModalPassword()"
                                    class="password-toggle">
                                <i id="modal-password-icon" class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>

                    <!-- 验证码 -->
                    <div class="form-group">
                        <div class="flex gap-3">
                            <div class="input-with-icon flex-1">
                                <i class="fas fa-shield-alt input-icon"></i>
                                <input type="text" id="modal-captcha" name="captcha" required
                                       class="form-input-with-icon"
                                       placeholder="请输入验证码">
                            </div>
                            <img id="captcha-image"
                                 src=""
                                 alt="验证码"
                                 onclick="window.LoginModal.fetchCaptcha()"
                                 class="h-12 border rounded cursor-pointer hover:opacity-80 transition-opacity"
                                 title="点击刷新验证码">
                        </div>
                    </div>

                    <!-- 记住我 -->
                    <div class="form-options">
                        <label class="checkbox-container">
                            <input type="checkbox" id="modal-remember" name="remember"
                                   class="checkbox-input">
                            <span class="checkbox-label">记住我</span>
                        </label>
                        <a href="{:_url_('user.forgot')}" target="_blank" class="forgot-link">忘记密码？</a>
                    </div>

                    <!-- 登录按钮 -->
                    <button type="submit" id="modal-login-btn" onclick="submitModalLogin()"
                            class="login-button">
                        登录
                    </button>
                </div>
            </form>

            <!-- 分割线 -->
            <div class="divider">
                <div class="divider-line"></div>
                <span class="divider-text">或</span>
                <div class="divider-line"></div>
            </div>

            <!-- 注册链接 -->
            <div class="register-section">
                <span class="register-text">还没有账号？</span>
                <a href="{:_url_('user.register')}" target="_blank" class="register-link">立即注册</a>
            </div>
        </div>
    </div>
</div>


